<template>
  <Card class="table-tool">
    <Button class="table-tool-btn" type="info" @click="openModal()">添加</Button>
    <Button class="table-tool-btn" type="warning" @click="deleteUser(selectedColunms.map(item=>item.id))">批量删除</Button>
  </Card>

  <Table
      border
      show-header
      :data="userData"
      :columns="userColunms"
      @on-selection-change="tableSelectChange"
  >
    <template #action="{ row, index }">
      <Button class="action-btn" size="small" type="info" @click="openModal(row)">编辑</Button>
      <Button class="action-btn" size="small" type="warning" @click="deleteUser(row.id)">删除</Button>
    </template>

  </Table>
  <CPage
      :change-complete="handleGetList"
      :total="userData.length"
  ></CPage>
  <UserEditModal @addUserComplete="addUserComplete">
  </UserEditModal>
</template>
<script setup>
import {ref, onMounted} from "vue";
import UserEditModal from "@/module-base/views/sys-manage/user/user-edit-modal.vue";
import {addUserByAdmin, getUserList} from "@module-base/api/sysManage.js";
import CPage from '@/components/lz-page/lz-page.vue'
import {Message} from 'view-ui-plus'
import {useUserStore} from '@module-base/stores/userStore.js'
const {openModal, closeModal} = useUserStore()

const userColunms = ref([
  {
    type: 'selection',
    width: 60,
    align: 'center'
  },
  {
    type: 'index',
    width: 80,
    title: '序号',
    align: 'center'
  },
  {
    title: '用户名',
    key: 'userCode'
  },
  {
    title: '昵称',
    key: 'userName'
  }, {
    title: '性别',
    key: 'sex',
    width: 80,
    render: (h, params) => {
      return h('div', params.row.sex === 1 ? '男' : '女')
    }
  }, {
    title: '操作',
    slot: 'action',
  }]);
const selectedColunms=ref([])
function tableSelectChange(v){
  selectedColunms.value=v
}
// 用户操作
import {useUserHandle} from "@/module-base/views/sys-manage/user/userHandle.js";
const {
  userData: userData,
  deleteUser: deleteUser,
  handleGetList
} = useUserHandle()

function addUserComplete() {
  // 添加用户成功后重新获取列表
  handleGetList()
  Message.success('添加成功')
  closeModal()
}
</script>
<style scoped>
.action-btn {
  margin: 0 4px;
}

.table-tool {
  margin: 16px 4px;
}

.table-tool-btn {
  margin: 0 4px;
}
</style>